<!-- @author zhengjie -->
<template>
  <div class="icon-body">
    <!-- 头部导航++++++++++++++++++++++ -->
    <div class="space-between center" style="padding-top: 10px;background: #fff;padding-bottom: 10px;">
      <div class="center">
        <img @click="toUrl('/login')" class="cursor" style="width: 210px;height: 34px;margin-left: 160px;" referrerpolicy="no-referrer" src="@/assets/logo/logo@2x.png" />
        <div class=" cursor f_bold ml_64 f_18 color_173690" @click="toUrl('/login')">官方首页</div>
        <!-- <div class=" cursor f_bold ml_64 f_18" @click="toUrlr('/center')">开发</div> -->

        <!-- <div class=" cursor f_bold ml_64 f_18 color_173690" @click="toUrl('/homeupdatelog')">更新日志</div> -->
        <div class=" cursor f_bold ml_64 f_18 color_173690" @click="toUrl('/homenotice')">新闻公告</div>
        <!-- <div class=" cursor f_bold ml_64 f_18 color_173690" @click="toWai()">开发文档</div> -->

        <div class=" cursor f_bold ml_64 f_18 color_173690" @click="toUrl('/becomedev')">成为开发者</div>
        <!-- <div class=" cursor f_bold ml_64 f_18 color_173690" @click="toUrlr('/center/PersonalCertificate')">成为开发者</div> -->

        <!-- <div v-if="user_info.audit_status != 3" class=" cursor f_bold ml_64 f_18"
            @click="toUrlr('/center/PersonalCertificate')">成为开发者</div> -->
      </div>

      <div class="row center" style="margin-right: 150px;">
        <!-- <div class="qugwbt center cursor" style="margin-right: 80px;" @click="toUrl('/login')">前往官网</div> -->

        <div v-if="username" class="row center">
          <div class="f18 f_bold cursor mr_10">开发者id:{{user_id}}</div>
          <div v-if="user_info.audit_status !=3" class=" kfzdj center ml_10 mr_10">暂未认证</div>
          <div v-else class=" kfzdj center ml_10 mr_10">开发者等级{{user_info.dev_class}}</div>


          <div class="center mr_5 cursor" @click="toUrl('/center/personalm')">
            <el-avatar :size="40" :src="avatar"></el-avatar>
          </div>
          <div class="f18 f_bold cursor">{{username}}</div>
          <div class="f18 f_bold cursor ml_16" @click.stop="logout">退出</div>
        </div>



        <div v-else class="row center">


          <div class="center mr_5 cursor">
            <img style="height: 35x;width: 42px;" src="@/assets/images/tx.png"></img>
          </div>
          <div @click.prevent="childMethod(1)" class="f18 f_bold  cursor ml_16">登录</div>
          <div @click.prevent="childMethod(2)" class="cursor f_bold  ml_10">注册</div>
        </div>


      </div>
    </div>
    <!-- 头部导航=============== -->
  </div>
</template>

<script>
  import {
    getToken,
    setToken,
    removeToken
  } from '@/utils/auth'
  import * as User from "@/api/system/user";
  export default {
    name: 'Navv',
    data() {
      return {
        user_info: {
          audit_status: 3,
        }, //用户详情
        avatar: '',
        username: '',
        user_id: '',
        // avatar:this.store.getters.avatar,
        // name:this.store.getters.name,
        // circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      }
    },



    created() {
      var token = getToken();
      if (token) {
        this.getUserInfo(); //查询用户详情
      } else {
        localStorage.clear()
      }
      // 读取缓存
      this.username = localStorage.getItem('username')
      this.avatar = localStorage.getItem('avatar')
      this.user_id = localStorage.getItem('user_id')
    },

    methods: {

      /**查询用户详情 */
      getUserInfo() {
        //audit_status 1：未提交，2：已提交 3：审核通过 4：审核失败'

        this.loading = true;
        User.getUserInfo().then(response => {
          this.user_info = response.data
          localStorage.setItem('username', response.data.username)
          localStorage.setItem('avatar', response.data.avatar)
          this.avatar = response.data.avatar;
          localStorage.setItem('user_id', response.data.id)
          console.log('用户详情Navv', this.user_info)
          this.loading = false;
        });
      },


      async logout() {
        this.$confirm('确定注销并退出系统吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$store.dispatch('LogOut').then(() => {
            localStorage.clear();
            location.href = '/index';
          })
        }).catch(() => {});
      },




      toUrlr(url) {
        var token = getToken();
        if (!token) {
          this.$message({
            message: '请先登录',
            type: 'warning'
          });
          return
        }

        // if (this.user_info.audit_status != 3) {
        //   this.$message({
        //     message: '请先实名认证',
        //     type: 'warning'
        //   });
        //   return
        // }

        this.$router.push({
          path: url
        })
      },

      toUrl(url) {
        console.log('navv', url)
        this.$router.push({
          path: url
        })
      },

      toWai() {
        // window.location.href = "http://doc.3kfz.com";
        window.open("http:///doc.3kfz.com", "_blank");
      },


      childMethod(type) {
        //type 1登录 2注册
        this.$parent.fatherMethod(type);
      }

    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .kfzdj {
    width: 120px;
    height: 38px;
    background: #1a82fb;
    border-radius: 5px;

    font-size: 16px;

    font-weight: 500;
    color: #fff;
  }

  .boxs1 {
    padding: 10px;
    width: 150px;
    height: 95px;
    background: #FFFFFF;
    box-shadow: 0px 3px 6px 0px rgba(125, 124, 130, 0.5);
    border-radius: 5px;
    position: fixed;
    top: 70px;
    left: 520px;
  }

  .boxs2 {
    padding: 10px;
    width: 150px;
    height: 95px;
    background: #FFFFFF;
    box-shadow: 0px 3px 6px 0px rgba(125, 124, 130, 0.5);
    border-radius: 5px;
    position: fixed;
    top: 70px;
    left: 690px;
  }

  .xjt {
    font-size: 22px;
    margin-top: 5px;
    margin-left: 5px;
  }

  .qugwbt {
    width: 95px;
    height: 37px;
    background: #1A82FB;
    border-radius: 10px 10px 10px 10px;
    opacity: 1;
    font-size: 18px;
    font-weight: normal;
    color: #FFFFFF;
    line-height: 22px;
    font-weight: bold;
  }




  ::v-deep .el-dropdown {
    display: inline-block;
    position: relative;
    color: #000000;
    font-size: 18px;
    font-weight: bold;
  }

  ::v-deep .el-icon-arrow-down:before {
    font-size: 20px;
    content: "";
  }
</style>
